<template>
  <div>
    <el-tabs v-model="activeTab" type="card" style="width: 100%;border: none">
      <el-tab-pane label="问题列表" name="healthArchives" >
        <el-card style="border-color: white">
          <el-row>
            <el-col :span="24">
              <el-card>
                <el-row>
                  <el-col :span="4">
                    <el-input v-model="formInline.issueTitle" placeholder="问题标题"></el-input>
                  </el-col>
                  <el-col :span="4">
                    <el-input v-model="formInline.issueCategory" placeholder="问题分类"></el-input>
                  </el-col>
                  <el-col :span="4">
                    <el-select v-model="formInline.client" placeholder="客户端">
                      <el-option label="全部客户端" value="all"></el-option>
                      <el-option label="外卖APP" value="takeout"></el-option>
                      <el-option label="商家APP" value="merchant"></el-option>
                      <el-option label="骑手APP" value="rider"></el-option>
                    </el-select>
                  </el-col>
                  <el-col :span="4">
                    <el-select v-model="formInline.status" placeholder="状态">
                      <el-option label="全部状态" value="all"></el-option>
                      <el-option label="正常" value="normal"></el-option>
                      <el-option label="待处理" value="pending"></el-option>
                      <el-option label="已解决" value="solved"></el-option>
                    </el-select>
                  </el-col>
                  <el-col :span="4">
                    <el-date-picker
                        v-model="formInline.creationTime"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        value-format="yyyy-MM-dd HH:mm:ss"
                    ></el-date-picker>
                  </el-col>
                  <el-col :span="4">
                    <el-button type="primary" icon="el-icon-search">搜索</el-button>
                    <el-button type="warning" icon="el-icon-refresh">重置</el-button>
                  </el-col>
                </el-row>
                <el-table :data="issues" style="width: 100%">
                  <el-table-column prop="id" label="编号"></el-table-column>
                  <el-table-column prop="issueTitle" label="问题标题"></el-table-column>
                  <el-table-column prop="issueCategory" label="问题分类"></el-table-column>
                  <el-table-column prop="client" label="客户端"></el-table-column>
                  <el-table-column prop="priority" label="排序号"></el-table-column>
                  <el-table-column prop="creationTime" label="创建时间"></el-table-column>
                  <el-table-column prop="status" label="状态"></el-table-column>
                  <el-table-column label="操作">
                    <template slot-scope="scope">
                      <el-button type="text" size="small" @click="editIssue(scope.row)">编辑问题</el-button>
                      <el-button
                          type="text"
                          size="small"
                          @click="disableIssue(scope.row)"
                          v-if="scope.row.status === 'normal'"
                      >禁用问题</el-button>
                      <el-button
                          type="text"
                          size="small"
                          @click="enableIssue(scope.row)"
                          v-if="scope.row.status === 'disabled'"
                      >启用问题</el-button>
                      <el-button type="text" size="small" @click="deleteIssue(scope.row)">删除问题</el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <!-- 分页展示数据-->
                <el-pagination
                    @current-change="handleCurrentChange"
                    :current-page="pageNum"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                </el-pagination>
              </el-card>
            </el-col>
          </el-row>
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="问题分类" name="healthRecords" >
        <el-card style="border-color:white">
            <el-row>
              <el-col :span="24">
                <el-card>
                  <el-row>
                    <el-col :span="4">
                      <el-input v-model="formInline2.categoryName" placeholder="分类名称"></el-input>
                    </el-col>
                    <el-col :span="4">
                      <el-select v-model="formInline2.client" placeholder="客户端">
                        <el-option label="全部客户端" value="all"></el-option>
                        <el-option label="外卖APP" value="takeout"></el-option>
                        <el-option label="商家APP" value="merchant"></el-option>
                        <el-option label="骑手APP" value="rider"></el-option>
                      </el-select>
                    </el-col>
                    <el-col :span="4">
                      <el-select v-model="formInline2.status" placeholder="状态">
                        <el-option label="全部状态" value="all"></el-option>
                        <el-option label="正常" value="normal"></el-option>
                        <el-option label="待处理" value="pending"></el-option>
                        <el-option label="已解决" value="solved"></el-option>
                      </el-select>
                    </el-col>
                    <el-col :span="4">
                      <el-date-picker
                          v-model="formInline2.creationTime"
                          type="daterange"
                          range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期"
                          value-format="yyyy-MM-dd HH:mm:ss"
                      ></el-date-picker>
                    </el-col>
                    <el-col :span="4">
                      <el-button type="primary" icon="el-icon-search">搜索</el-button>
                      <el-button type="warning" icon="el-icon-refresh">重置</el-button>
                    </el-col>
                  </el-row>
                  <el-table :data="issueCategories" style="width: 100%">
                    <el-table-column prop="id" label="编号"></el-table-column>
                    <el-table-column prop="categoryName" label="分类名称"></el-table-column>
                    <el-table-column prop="client" label="客户端"></el-table-column>
                    <el-table-column prop="relatedIssues" label="关联问题"></el-table-column>
                    <el-table-column prop="priority" label="排序号"></el-table-column>
                    <el-table-column prop="creationTime" label="创建时间"></el-table-column>
                    <el-table-column prop="status" label="状态"></el-table-column>
                    <el-table-column label="操作">
                      <template slot-scope="scope">
                        <el-button type="text" size="small" @click="editCategory(scope.row)">编辑分类</el-button>
                        <el-button
                            type="text"
                            size="small"
                            @click="disableCategory(scope.row)"
                            v-if="scope.row.status === 'normal'"
                        >禁用分类</el-button>
                        <el-button
                            type="text"
                            size="small"
                            @click="enableCategory(scope.row)"
                            v-if="scope.row.status === 'disabled'"
                        >启用分类</el-button>
                        <el-button type="text" size="small" @click="deleteCategory(scope.row)">删除分类</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                  <!-- 分页展示数据-->
                  <el-pagination
                      @current-change="handleCurrentChange"
                      :current-page="pageNum"
                      :page-sizes="[10, 20, 30, 40]"
                      :page-size="pageSize"
                      layout="total, sizes, prev, pager, next, jumper"
                      :total="total">
                  </el-pagination>
                </el-card>
              </el-col>
            </el-row>
        </el-card>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 'healthArchives',
      formInline:{},
      formInline2:{},
      pageNum:1,
      pageSize:10,
      total:0,
      issueTitle: "",
      issueCategory: "",
      client: "all",
      status: "all",
      creationTime: [],
      issues: [],
      issueCategories:[],
    };
  },
  methods: {
    findPage() { //查询所有加分页参数
      this.axios.post(`http://localhost:8000/xm-platform/xm-issues/findPage?pageNum=${this.pageNum}&pageSize=${this.pageSize}`, this.formInline).then(res => {
        console.log(res.data);
        this.issues = res.data.data.records;
        this.total = res.data.data.total;
      })
    },
    findPage2() { //查询所有加分页参数
      this.axios.post(`http://localhost:8000/xm-platform/xm-issue-categories/findPage?pageNum=${this.pageNum}&pageSize=${this.pageSize}`, this.formInline2).then(res => {
        console.log(res.data);
        this.issueCategories = res.data.data.records;
        this.total = res.data.data.total;
      })
    },
    handleCurrentChange(val) {//分页方法
      this.pageNum = val;
      this.findPage();
    },
    editIssue(row) {
      // 这里添加编辑问题的逻辑
      console.log("编辑问题:", row);
    },
    disableIssue(row) {
      // 这里添加禁用问题的逻辑
      console.log("禁用问题:", row);
    },
    enableIssue(row) {
      // 这里添加启用问题的逻辑
      console.log("启用问题:", row);
    },
    deleteIssue(row) {
      // 这里添加删除问题的逻辑
      console.log("删除问题:", row);
    },
  },
  created(){
    this.findPage();
    this.findPage2();
  }
};
</script>

<style scoped>
</style>
